$(function () {
    class Huawei {
        constructor() {
            this.banner = $(".swiper-selector ul li")
            this.ID = cookie("ID")
            this.TOKEN = cookie("TOKEN")
            this.hide()
            this.getData()
        }
        // 获取数据
        getData() {
            var options = {
                url: "http://localhost:3000/static/data/index-icon.json",
            }
            ajax(options).then(response => {
                response = JSON.parse(response)
                this.getMainData(response)
            })
        }

        // 获取手写数据 渲染重复部分
        getMainData(response) {
            var options = {
                url: "http://localhost:3000/static/data/index.json",
            }

            axios(options).then(res => {
                this.renderCompany(response)
                this.activity(response)
                this.hot(res)
                this.list(res)
                this.wear(res)
                this.life(res)
                this.wine(res)
                this.footerTop(response)
                this.footerMiddleLeft(res)
                this.getLoginData()
                this.bindEvent()
                new LazyLoad("main img")
                // this.bindEvent()
            })
        }
        getLoginData() {
            var option = {
                url: "http://localhost:8888/users/info/" + this.ID,
                headers: {
                    "authorization": this.TOKEN
                },
                dataType: "json"
            }
            $.get(option).then(result => {
                $("#login").text("hi~" + result.info.nickname)
            })
        }
        bindEvent() {
            // 点击删除above
            $("#above-btn").on("click", () => {
                $(".h-above").remove()
            })
            // 二级菜单
            $("#server").on("mouseover", () => {
                $("#server-list").css({ "display": "block" })
            })
            $("#server").on("mouseout", () => {
                $("#server-list").css({ "display": "none" })
            })
            $("#phone").on("mouseover", () => {
                $("#phone-list").css({ "display": "block" })
            })
            $("#phone").on("mouseout", () => {
                $("#phone-list").css({ "display": "none" })
            })
            $("#cart").on("mouseover", () => {
                $("#cart-list").css({ "display": "block" })
            })
            $("#cart").on("mouseout", () => {
                $("#cart-list").css({ "display": "none" })
            })
            // search 点击效果切换
            $(".h-nav-right img").on("mouseover", a => {
                $(".h-nav-right img").attr({ "src": "../static/img/search1.png" })
            })
            $(".h-nav-right img").on("mouseout", a => {
                $(".h-nav-right img").attr({ "src": "../static/img/search.png" })
            })
            $(".h-nav-right img").on("click", a => {
                $(".h-nav-left").css({ display: "none" })
                $(".h-nav-middle").css({ display: "none" })
                $(".right-img").css({ display: "none" })
                $(".search").css({ display: "block" })
                $(".vague").css({ display: "block" })
                animate($(".vague")[0], { opacity: 1 })
                animate($(".search")[0], { right: 900, opacity: 1 })
                $("#search-inp").focus()
            })

            // search点击效果
            // 点击list标题切换效果
            $("#wear .space div").each((index, ele) => {
                ele.onclick = function () {
                    $("#wear .space div").each((index, ele) => {
                        ele.classList.remove("space-large")
                    })
                    ele.classList.add("space-large")
                }
            })
            $("#phone .space div").each((index, ele) => {
                ele.onclick = function () {
                    $("#phone .space div").each((index, ele) => {
                        ele.classList.remove("space-large")
                    })
                    ele.classList.add("space-large")
                }
            })
            $("#envir .space div").each((index, ele) => {
                ele.onclick = function () {
                    $("#envir .space div").each((index, ele) => {
                        ele.classList.remove("space-large")
                    })
                    ele.classList.add("space-large")
                }
            })
            $("#bear .space div").each((index, ele) => {
                ele.onclick = function () {
                    $("#bear .space div").each((index, ele) => {
                        ele.classList.remove("space-large")
                    })
                    ele.classList.add("space-large")
                }
            })
            // 显示aside **********************节流问题！！！
            window.addEventListener( "scroll" , a=> {
                this.asideCheck( scrollY )
                this.asideRed( scrollY )
            })
            $(".aside").eq(1).on("click", a => {
                this.ladder(1950)
                this.asideRed( 1950 )
            })
            $(".aside").eq(2).on("click", a => {
                this.ladder($("#wear").offset().top)
                this.asideRed( $("#wear").offset().top )
            })
            $(".aside").eq(3).on("click", a => {
                this.ladder($("#envir").offset().top)
                this.asideRed( $("#envir").offset().top )
            })
            $(".aside").eq(4).on("click", a => {
                this.ladder(0)
            })
            // 模糊搜索
            $("#search-inp").on("input", a => {
                this.vagueSearch()
            })
            $(".swiper").on( "click" , "li" , (e) => {
                // console.log(e.target.innerHTML);
                this.vagueHref( e.target.innerHTML )
            })
            $("#search-btn").on("click", a => {
                $(".search").css({ display: "none" })
                $(".vague").css({ display: "none" })
                $(".h-nav-left").css({ display: "block" })
                $(".h-nav-middle").css({ display: "block" })
                $(".right-img").css({ display: "block" })
                animate($(".vague")[0], { opacity: 0 })
                animate($(".search")[0], { right: 300, opacity: 0 })
            })
        }
        async vagueHref( name ){
            var data = await $.getJSON( "../../static/data/list-pull.json" )
            data = data.resultList
            
            for( var i = 0 ; i < data.length ; i++  ){
                if( data[i].name === name ){
                    cookie("html" , "phonelist")
                    cookie("productId" , data[i].productId)
                    window.open( "http://localhost:3000/dist/detail.html" , "_blank" )
                }
            }
        }
        // 模糊搜索
        vagueSearch() {
            var search = document.querySelector(".search input");
            search.oninput = async function(){
                var data = await $.getJSON( "../../static/data/list-pull.json" )
                console.log(data);
                
                data = data.resultList
                var input = $("#search-inp").val()
                var input_arr = input.split("")
                var reg = new RegExp( `[${input}]+` , 'ig' ) 
                var reg_arr = []
                var count = 0
                for( var i = 0 ; i < data.length ; i++ ){
                    if( count === 7 ) break
                    if( reg.test(data[i].name) ){
                        reg_arr.push(data[i].name)
                        count++
                    }
                }
                var html = ''
                for( var i = 0 ; i < reg_arr.length ; i++ ){
                    html += `<li>${reg_arr[i]}</li>`
                }
                $(".vague").html( html )
            }
        }

        // 梯子
        ladder(height) {
            if (height === 0) {
                $("html,body").animate({ scrollTop: 0 }, 500)
                return
            }
            $("html,body").animate({ scrollTop: height - 70 }, 500)
        }

        asideRed( scrollY ){
            
            if( scrollY > 1870 && scrollY < 2740  ){
                $("aside img")[1].src = "http://localhost:3000/static/img/shoujied.png"
            }else{
                $("aside img")[1].src = "http://localhost:3000/static/img/shouji.png"
            }
            if( scrollY > 2740 && scrollY < 3600  ){
                $("aside img")[2].src = "http://localhost:3000/static/img/watched.png"
            }else{
                $("aside img")[2].src = "http://localhost:3000/static/img/watch.png"
            }
            if( scrollY > 3600 ){
                $("aside img")[3].src = "http://localhost:3000/static/img/lifeed.png"
            }else{
                $("aside img")[3].src = "http://localhost:3000/static/img/life.png"
            }
        }

        // 到达指定高度显示aside
        asideCheck( scrollY ) {
            if (scrollY > 400) {
                $("aside").css({ display: "block" })
            } else {
                $("aside").css({ display: "none" })
            }
        }

        // 轮播图类品展示 
        hide() {
            this.banner.each((index) => {
                $(".swiper-selector ul li").eq(index).on("mouseenter", () => {
                    $(".box-fix").eq(index).css({ "display": "grid" })
                })
                $(".swiper-selector ul li").eq(index).on("mouseleave", () => {
                    $(".box-fix").eq(index).css({ "display": "none" })
                })
            })
        }

        // 渲染 企业购x
        renderCompany(company_data) {
            var data = company_data
            var html = ""
            for (var i = 14; i < 21; i++) {
                html += `
                <div class="company">
                    <img src="${data[i].src}" alt="">
                    <div>${data[i].title}</div>
                </div>`
            }
            $("section").html(html)
        }
        // top4x
        activity(activity_data) {
            var data = activity_data
            var html = ''
            for (var i = 21; i < 25; i++) {
                html += `
                <div class="activity">
                    <a href="http://localhost:3000/dist/activity.html">
                        <img data-src="${data[i].src}" alt="">
                    </a>
                </div>`
            }
            $("#activity-render").html(html)
        }

        // 爆款推荐x
        hot(hot_data) {
            var data = hot_data.data[0]
            var html = `
            <div class="hot-img-big">
                <img data-src="${data["hot-recommend"]}" alt="">
            </div>`
            for (var i = 0; i < data["hot"].length; i++) {
                html += `
                <div class="hot">
                    <img class="hot-img" data-src="${data.hot[i].img}" alt="">
                    <h5 class="hot-title">${data.hot[i].title}</h5>
                    <div class="hot-tip">${data.hot[i].tip}</div>
                    <div class="hot-price">${data.hot[i].price}</div>
                </div>`
            }
            $("#hot-render").html(html)
        }
        // 手机x
        list(list_data) {
            var data = list_data.data[0].phone
            var html = ''
            for (var i = 0; i < data.length; i++) {
                html += `
                <div class="list">
                    <img class="list-img" data-src="${data[i].img}" alt="">
                    <h5 class="list-title">${data[i].title}</h5>
                    <div class="list-tip">${data[i].tip}</div>
                    <div class="list-price">${data[i].price}</div>
                </div>`
            }
            $("#list-render").html(html)
        }
        // 智能穿戴x
        wear(wear_data) {
            var data = wear_data.data[0].wear
            var html = ''
            for (var i = 0; i < data.length; i++) {
                html += `
                <div class="list">
                    <img class="list-img" data-src="${data[i].img}" alt="">
                    <h5 class="list-title">${data[i].title}</h5>
                    <div class="list-tip">${data[i].tip}</div>
                    <div class="list-price">${data[i].price}</div>
                </div>`
            }
            $("#wear-render").html(html)
        }
        // 生态精品x
        life(life_data) {
            var data = life_data.data[0]
            var html = `
            <div class="hot-img-big">
                <img data-src="${data["ecology"]}" alt="">
            </div>`
            for (var i = 0; i < data["life"].length; i++) {
                html += `
                <div class="hot">
                    <img class="hot-img" data-src="${data.life[i].img}" alt="">
                    <h5 class="hot-title">${data.life[i].title}</h5>
                    <div class="hot-tip">${data.life[i].tip}</div>
                    <div class="hot-price">${data.life[i].price}</div>
                </div>`
            }
            $("#life-render").html(html)
        }
        // 美食酒饮x
        wine(wine_data) {
            var data = wine_data.data[0]
            var html = `
            <div class="hot-img-big">
                <img data-src="${data["wine"]}" alt="">
            </div>`
            for (var i = 0; i < data["delicious"].length; i++) {
                html += `
                <div class="hot">
                    <img class="hot-img" data-src="${data.delicious[i].img}" alt="">
                    <h5 class="hot-title">${data.delicious[i].title}</h5>
                    <div class="hot-tip">${data.delicious[i].tip}</div>
                    <div class="hot-price">${data.delicious[i].price}</div>
                </div>`
            }
            $("#wine-render").html(html)
        }

        // x
        footerTop(footer_data) {
            var data = footer_data
            var html = ''
            for (var i = 74; i < 78; i++) {
                html += `
                <div class="footer-top-float">
                    <div class="footer-top-title">
                        <img src="${data[i].src}" alt="">
                        <p>${data[i].title}</p>
                    </div>
                </div>`
            }
            $("#footer-top-render").html(html)
        }

        // x
        footerMiddleLeft(footer_data) {
            var data = footer_data.data[0].footer
            var html = ''
            for (var attr in data) {
                html += `<dl class="task clear">
                <dt class="task-title">${data[attr][0]}</dt>`
                for (var i = 1; i < data[attr].length; i++) {
                    html += `<li>${data[attr][i]}</li>`
                }
                html += '</dl>'
            }
            $("#footer-middle-left-render").html(html)
        }


    }

    new Huawei()
})


var list = document.querySelector(".vague");


function render(res) {
    if (res.g instanceof Array) {
        var html = `<ul>`
        html += res.g.map(item => `<li>${item.q}</li>`).join("");
        html += `</ul>`
        list.innerHTML = html
    } else {
        list.innerHTML = "";
    }
}
